<template>
  <div class="virtual-lab-container">
    <h2 class="lab-title">钠与水的反应</h2>
    
    <div class="scene-wrapper">
      <div 
        class="reagent-source" 
        v-if="isReagentVisible"
        draggable="true"
        @dragstart="handleDragStart"
      >
        <div class="sodium-block"></div>
        <span>拖动此钠块</span>
      </div>
      <div v-else class="reagent-source-placeholder"></div>

      <div class="experiment-scene">
         <div 
          class="beaker"
          @dragover.prevent
          @drop.prevent="handleDrop"
        >
          <div class="water" :class="{ 'phenolphthalein-red': isWaterRed }">
            <div v-if="isFizzing" class="bubbles">
              <div class="bubble" v-for="i in 30" :key="i" :style="getBubbleStyle()"></div>
            </div>
          </div>
          <div 
            v-if="isSodiumDropped"
            class="sodium-in-water"
            :class="{ 
              'fizzing': isFizzing,
              'melted': isMelted
            }"
          ></div>
          <div v-if="showPopFlash" class="pop-flash"></div>
        </div>
      </div>
    </div>
    
    <div class="info-panel">
      <p><strong>实验现象:</strong> {{ phenomenonText }}</p>
      <p>2Na + 2H₂O = 2NaOH + H₂↑</p>
      <button @click="resetExperiment" :disabled="experimentState === 'idle'">
        重置实验
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// --- 状态管理 ---
const experimentState = ref('idle'); // 'idle', 'running', 'finished'
const isReagentVisible = ref(true); // 控制可拖拽的钠块是否可见
const phenomenonText = ref('请将左侧的钠块拖入烧杯中。');

// --- 现象控制 ---
const isSodiumDropped = ref(false);
const isMelted = ref(false);
const isFizzing = ref(false);
const showPopFlash = ref(false);
const isWaterRed = ref(true); // 默认已加酚酞

// --- 辅助函数 ---
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// --- 拖拽逻辑 ---
function handleDragStart(event) {
  // 设置拖拽数据，表明我们正在拖拽的是钠
  event.dataTransfer.setData('reagent', 'sodium');
}

async function handleDrop(event) {
  const reagent = event.dataTransfer.getData('reagent');
  // 确认拖入的是钠，并且实验处于空闲状态
  if (reagent === 'sodium' && experimentState.value === 'idle') {
    isReagentVisible.value = false; // 隐藏原始的钠块
    await startExperiment();
  }
}

// --- 主要实验逻辑 ---
async function startExperiment() {
  experimentState.value = 'running';

  phenomenonText.value = '钠块投入水中...';
  isSodiumDropped.value = true;
  await delay(500);

  phenomenonText.value = '钠浮在水面，熔化成银白色小球。';
  isMelted.value = true;
  await delay(1500);

  phenomenonText.value = '小球迅速游动，发出嘶嘶声，产生气体。';
  isFizzing.value = true;
  await delay(4000);

  if (Math.random() > 0.4) {
    phenomenonText.value = '氢气被点燃，发生轻微爆鸣！';
    showPopFlash.value = true;
    await delay(300);
    showPopFlash.value = false;
    await delay(1000);
  }

  phenomenonText.value = '生成NaOH，使酚酞溶液变红。';
  isWaterRed.value = true; // 在这个版本里，我们假设一直都是红色
  await delay(2000);

  isFizzing.value = false;
  phenomenonText.value = '反应结束。';
  experimentState.value = 'finished';
}

// --- 重置实验 ---
function resetExperiment() {
  experimentState.value = 'idle';
  isReagentVisible.value = true;
  isSodiumDropped.value = false;
  isMelted.value = false;
  isFizzing.value = false;
  showPopFlash.value = false;
  // isWaterRed 保持 true 或根据需要重置
  phenomenonText.value = '请将左侧的钠块拖入烧杯中。';
}

// --- 动态样式 (气泡) ---
const getBubbleStyle = () => ({
  left: `${Math.random() * 100}%`,
  animationDuration: `${Math.random() * 2 + 3}s`,
  animationDelay: `${Math.random() * 4}s`,
  width: `${Math.random() * 8 + 2}px`,
  height: `${Math.random() * 8 + 2}px`,
});

</script>

<style scoped>
/* 容器和通用布局 */
.virtual-lab-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fdfdfd;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 20px;
}
.lab-title { text-align: center; color: #334e68; margin-top: 0;}
.scene-wrapper { display: flex; align-items: flex-end; justify-content: center; gap: 40px; flex-grow: 1; }

/* 可拖拽的试剂 */
.reagent-source { text-align: center; cursor: grab; }
.reagent-source:active { cursor: grabbing; }
.sodium-block { width: 50px; height: 50px; background-color: #d1d9e6; border: 1px solid #829ab1; margin: 0 auto 10px; }
.reagent-source-placeholder { width: 150px; } /* 占位防止布局跳动 */

/* 烧杯和场景 */
.experiment-scene { position: relative; }
.beaker { width: 200px; height: 250px; border: 4px solid #829ab1; border-top: none; border-radius: 0 0 20px 20px; position: relative; overflow: hidden; background-color: #e0e6ed; }
.water { position: absolute; bottom: 0; width: 100%; height: 60%; background-color: #a7d8e8; border-radius: 0 0 16px 16px; transition: background-color 2s ease; }
.water.phenolphthalein-red { background-color: #ffb6c1; }

/* 反应中的钠球 */
.sodium-in-water { position: absolute; width: 25px; height: 25px; top: 45%; left: 50%; transform: translateX(-50%); background-color: #d1d9e6; transition: all 1s ease-in-out; }
.sodium-in-water.melted { border-radius: 50%; background-color: #f0f4f8; border: 2px solid #b0c4de; }
.sodium-in-water.fizzing { animation: darting 0.7s infinite alternate ease-in-out; }

/* 信息面板 */
.info-panel {
  margin-top: 20px;
  padding: 15px;
  text-align: center;
  background-color: #f0f4f8;
  border-radius: 8px;
}
.info-panel p { margin: 8px 0; color: #486581;}
.info-panel button { margin-top: 10px; padding: 10px 25px; border: none; border-radius: 6px; background-color: #e74c3c; color: white; cursor: pointer; transition: background-color 0.3s; }
.info-panel button:disabled { background-color: #a0a0a0; cursor: not-allowed; }
.info-panel button:hover:not(:disabled) { background-color: #c0392b; }

/* 动画效果 (与之前相同) */
@keyframes darting { 0% { transform: translate(-50%, 0); } 25% { transform: translate(calc(-50% + 20px), -5px); } 50% { transform: translate(calc(-50% - 15px), 8px); } 75% { transform: translate(calc(-50% + 10px), -10px); } 100% { transform: translate(calc(-50% - 25px), 2px); } }
.pop-flash { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,255,100,0.9) 0%, rgba(255,165,0,0) 70%); border-radius: 50%; }
.bubbles { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;}
.bubble { position: absolute; bottom: -10px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; opacity: 0; animation-name: rise; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes rise { to { transform: translateY(-150px); opacity: 0; } }
</style>